import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts';
import styles from './index.less';

type EChartsOption = echarts.EChartsOption;

export default function Pie(prors: any) {
  const { data } = prors;
  let option: EChartsOption;
  const lineRef = useRef<HTMLDivElement>(null);
  let myChart: any;
  const initChart = () => {
    if (myChart != null && myChart != undefined) {
      myChart.dispose();
    }
    myChart = echarts.init(lineRef.current!);
    // myChart.clear()
    // const arr: any = [
    //   { value: 2, name: '无卵阶段' },
    //   { value: 4, name: '过熟阶段' },
    //   { value: 1, name: '1.0阶段' },
    //   { value: 2, name: '2.0阶段' },
    //   { value: 2, name: '2.7阶段' },
    // ];
    const arr: any = data;
    option = {
      color: ['#F04864', '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#6379FB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        top: '3%',
        containLabel: true,
      },
      label: {
        alignTo: 'edge',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        color: '#fff',
        rich: {
          time: {
            fontSize: 10,
            color: '#fff',
          },
        },
      },
      series: [
        {
          name: '发育阶段占比',
          type: 'pie',
          radius: ['30%', '60%'],
          data: arr,
        },
      ],
    };
    option && myChart.setOption(option);
  };
  useEffect(() => {
    initChart();
  });
  return <div ref={lineRef} className={`${styles.lineBox}`}></div>;
}
